<?xml version="1.0" encoding="ISO-8859-1" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:cf="http://chartfaces.org/chart">
<head>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=ISO-8859-1" />
<link rel="shortcut icon" href="chartfaces.ico" />
<title>ChartFaces Demo - Advanced Scatter Chart</title>
</head>
<body>
<div align="center">
<div>
<button class="move" value="up" type="button">Move Up</button><br/>
<button class="move" value="left" type="button">Move Left</button>
<button class="move" value="right" type="button">Move Right</button><br/>
<button class="move" value="down" type="button">Move Down</button><br/>
</div>
<h:form></h:form>
<br/>
<h4 style="color:darkred">Colored Mandelbrot Fractal Rendered as TIFF Image</h4>
<div>
<cf:scatter	id="chart" settings="#{weightHeight.chartSettings}" width="600pt" height="555pt"
	leftPadding="60" topPadding="60" bottomPadding="60" rightPadding="60"
	zoomListener="#{mandelbrot1.zoom}" zoomListener2="#{mandelbrot1.zoom2}"
	panListener="#{mandelbrot1.move}" resetListener="#{mandelbrot1.reset}" output="tiff">
<cf:scatter3vset value="#{mandelbrot1.values}"
	symbol="square" symbolSize="#{mandelbrot1.sizes}" symbolScale="#{mandelbrot1.scale}"
	propertyMap="#{mandelbrot1.propertyMap}"/>
<cf:yaxis min="#{mandelbrot1.ymin}" max="#{mandelbrot1.ymax}" width="200"
	value="#{mandelbrot1.yvalues}" />
<cf:yaxis min="#{mandelbrot1.ymin}" max="#{mandelbrot1.ymax}" width="200"
	value="#{mandelbrot1.yvalues}" position="right"/>
<cf:xaxis min="#{mandelbrot1.xmin}" max="#{mandelbrot1.xmax}" height="140"
	value="#{mandelbrot1.xvalues}"/>
<cf:xaxis min="#{mandelbrot1.xmin}" max="#{mandelbrot1.xmax}" height="140"
	value="#{mandelbrot1.xvalues}" position="top"/>
</cf:scatter>
</div>
<script language="javascript">
//<![CDATA[
$(document).ready(function() {
	$('.move').click( function() {
		$().publish('move', [this.value]);
	});
});
//]]>
</script>
<div>
<button value="reset" type="button">Reset</button>
</div>
<div>Status:<br/>
<textarea name="chartStatus" style="vertical-align:top;" rows="7" cols="50" readonly="readonly"></textarea>
</div>
</div>
</body>
</html>